<template>
  <div>
      <Title/>
      <div style="width:1152px;margin:0 auto;margin-top:24px">
        <el-card style="color:#555555">
          区块详情
        </el-card>
        <el-card style="margin-top:24px">
          <el-table
            :data="block_info"
            :show-header="false"
            style="width: 100%">
            <el-table-column
              prop="name"
              label="区块号"
              width="160">
            </el-table-column>
            <el-table-column
              prop="value"
              label="区块号"
              width=auto>
              <template slot-scope="scope">
                <div v-html='scope.row.value'></div>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
        <el-card style="margin-top:24px;">
          <el-table
            :data="extrinsics_list"
            @row-click="OnClickExtrinsics"
            style="width: 100%">
            <el-table-column
              label="事件hash"
              width="160">
              <template slot-scope="scope">
                  <router-link class="AddressLabel" :to='"/exterinsics/"+scope.row.hash+"/"+scope.row.id'>{{scope.row.hash}}</router-link>
                </template>
            </el-table-column>
            <el-table-column
              prop="pallet"
              label="模块名称"
              width=auto>
            </el-table-column>
            <el-table-column
              prop="method"
              label="方法名称"
              width=auto>
            </el-table-column>
            <el-table-column
              prop="fee"
              label="手续费"
              width=auto>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
  </div>
</template>

<script>
/* eslint-disable */

import axios from 'axios'
import qs from 'qs'
import Title from "./title.vue"
export default {
  name: 'Main',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      block_index: '',
      block_info:[
        {name: "区块号", value: ""},
        {name: "时间", value: ""},
        {name: "状态", value: ""},
        {name: "Hash", value: ""},
        {name: "父区块Hash", value: ""},
        {name: "根状态", value: ""},
        {name: "Extrinsics根", value: ""},
        {name: "打包者", value: ""}
      ],
      extrinsics_list: [
      ]
    }
  },
  components:{
    Title
  }, mounted: function () {
    this.block_index = this.$route.params.block_index
    if (this.GetStringType(this.block_index) == 1) {
      this.GetBlockByNumber()
    } else {
      this.GetBlockByHash()
    }
    
  }, destroyed: function () {
  },
  methods: {
    // 1 数字 2 hash 3 地址
    GetStringType(str) {
      if (str.length < 2){
        return 1
      } else {
        if (str.substring(0, 2).toLowerCase() == '0x'){
          return 2
        } else if(str.length < 10){
          return 1
        } else {
          return 3
        }
      }
    },
    getYMDHMS (timestamp) {
      let time = new Date(timestamp)
      let year = time.getFullYear()
      const month = (time.getMonth() + 1).toString().padStart(2, '0')
      const date = (time.getDate()).toString().padStart(2, '0')
      const hours = (time.getHours()).toString().padStart(2, '0')
      const minute = (time.getMinutes()).toString().padStart(2, '0')
      const second = (time.getSeconds()).toString().padStart(2, '0')

      return year + '-' + month + '-' + date + ' ' + hours + ':' + minute + ':' + second
    },
    BlockToShow(self, object) {
      self.block_info[0].value = object.number
      self.block_info[1].value = this.getYMDHMS(parseInt(object.time))
      self.block_info[2].value = object.finalized == true?"最终确认":"未最终确认"
      self.block_info[3].value = object.hash
      self.block_info[4].value = '<a class="AddressLabel" href="/#/blocks/'+object.parentHash+'">'+object.parentHash+'</a>'
      self.block_info[5].value = object.stateRoot
      self.block_info[6].value = object.extrinsicsRoot
      self.block_info[7].value = object.authorId
      self.Flush()
    },
    GetBlockByNumber() {
      var self = this
      axios.get('/api/get_block_info_by_idx/'+this.block_index).then(function(data){
        var object = data.data
        self.BlockToShow(self, object)
      })
    },
    GetBlockByHash() {
      var self = this
      axios.get('/api/get_block_info_by_hash/'+this.block_index.toLowerCase()).then(function(data){
        var object = data.data
        self.BlockToShow(self, object)
      })
    },
    Flush(){
      var self = this;
      console.log("Flush")
      console.log("/api/get_extrinsics_by_block_number/"+this.block_info[0].value)
      axios.get("/api/get_extrinsics_by_block_number/"+this.block_info[0].value).then(function(data){
        console.log(data)
        var obj = data.data
        for(var i = 0; i < obj.length; i++){
          obj[i].fee = (obj[i].fee/10000000000).toFixed(4)+" DOT"
        }
        self.extrinsics_list = obj
      })
    },
    OnClickExtrinsics(row) {
      console.log(row.id, row.hash)
      this.$router.push({path:'/exterinsics/'+row.hash+"/"+row.id})
    }
  }
}
</script>
<style lang="scss">
@import "../style/self.scss"; 
.AddressLabel{
  text-decoration:none;
  color:#21a3fb;
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
}
</style>